<!DOCTYPE html>
<html lang="es">
	<head>
    	<title>{{ titulo_pagina }}</title>
        <!-- Styles -->
        <link href="{{ path }}css/bootstrap.css" rel="stylesheet">
        <link href="{{ path }}css/bootstrap-overrides.css" rel="stylesheet">
    </head>

<body>
{% load humanize %}

<div class="widget widget-table" align="center">
	<div align="center">
        <p><h1>{{ matricula.estudiante.configuracion.institucion }}</h1></p>
        <p><h2>Historial de pagos por estudiante</h2></p>
	</div>
    <br/>
    
    <table width="900px">
    	<tr>
    	<td width="10%"><b>ESTUDIANTE:</b></td>
        <td colspan="7">{{ Estudiante.nombre }}</td>
        <td colspan="1"><b>PERIODO:</b></td>
        <td colspan="1">{{ matricula.periodo.nombre }}</td>
        </tr>
    </table>
    <br/>
    {% for lCiclo, vMatricula in matriculas.items %}
    	<br/>
        <table width="900px">
            <tr>
                <td width="10%"><b>FACULTAD:</b></td>
                <td width="50%">{{ vMatricula.matricula.facultad.nombre }}</td>
                <td width="10%"><b>SEMESTRE:</b></td>
                <td width="10%">{{ vMatricula.matricula.semestre }}</td>
                <td width="10%"><b>CUOTAS:</b></td>
                <td width="10%">{{ vMatricula.matricula.cuotas }}</td>
            </tr>
        </table>
        <table class="table table-striped table-bordered table-highlight" width="900px">
            <thead>
                <tr>
                    <th width="10%" align="center"><b>Cuota</b></th>
                    <th width="20%" align="center"><b>Fecha</b></th>
                    <th width="15%" align="center"><b>Valor</b></th>
                    <th width="15%" align="center"><b>Pagado</b></th>
                    <th width="40%" align="center"><b>Observaciones</b></th>
                </tr>
            </thead>
            <tbody>
                {% for campo in vMatricula.pagos %}
                    <tr class="{% cycle '' 'odd' %}">
                        <td align="right">{{ forloop.counter }}</td>
                        <td align="center">{{ campo.fecha|date:'d-m-Y' }}</td>
                        <td align="right">{{ campo.valor|floatformat:0|intcomma }}</td>
                        <td align="right">{{ campo.pagado|floatformat:0|intcomma }}</td>
                        <td align="center">{{ campo.observacion }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
	{% endfor %}
</div> <!-- /. widget-table -->

</body>
</html>